<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改图片信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../js/jquery-3.1.0.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/public.js"></script>
    <style>
        .layui-input {
            width: 300px;
        }

        .layui-form-item {
            margin-left: 25px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 10px">
        <label class="layui-form-label">图片编号：</label>
        <div class="layui-input-block" >
            <input type="text" name="id" id="id" style="color: #4E5465" readonly class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片用途：</label>
        <div class="layui-input-block">
            <select name="imguse" id="imguse" lay-filter="imguse" lay-verify="select" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片页面：</label>
        <div class="layui-input-block">
            <select name="imgpage" id="imgpage" lay-filter="imgpage" lay-verify="select" lay-search="">
                <option value=""> -- 请选择页面 --</option>
                <option value="0"> 首页</option>
                <option value="1"> 详情页</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注：</label>
        <div class="layui-input-block">
            <input type="text" name="imgnotice" id="imgnotice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片链接：</label>
        <div class="layui-input-block">
            <input type="text" name="imghref" id="imghref" lay-verify="required" lay-reqtext="图片链接是必填项，岂能为空？"
                   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片地址：</label>
        <div class="layui-input-block">
            <input type="text" name="imgurl" id="imgurl" lay-verify="required" lay-reqtext="图片地址是必填项，岂能为空？"
                   placeholder="请输入" autocomplete="off" class="layui-input" readonly style="color: #4E5465">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
        </div>
    </div>
</form>
</body>
<script>
    layui.use(['form', 'layedit', 'laydate', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , $ = layui.jquery

        //加载用途（可回收种类）下拉框
        $.ajax({
            type: "get",
            dataType: "json",
            url: "/refuse-web/api/indeximg/imguselist",
            async: true,
            success: function (data) {
                var res = data.data
                if (res != undefined && res != null && res != "") {
                    var html = "";
                    html += "<option value='' >请选择</option>";
                    for (var i = 0; i < res.length; i++) {
                        html += "<option value=" + res[i].id + ">" + res[i].name + "</option>";
                    }
                    $("#imguse").append(html);
                }
                //重新渲染select
                form.render('select');
            },
            error: function (msg) {
                alert("服务器请求失败！", {icon: 5});
            }
        });

        var id = GetQueryString("id");
        $("#id").val(id);
        //根据id获取图片信息
        $.ajax({
            type: "get",
            datyaType: "json",
            url: "/refuse-web/api/indeximg/info?id=" + id,
            async: true,
            success: function (data) {
                var res = data.data;
                if (res != null) {
                    $("#imgurl").val(res.imgurl);
                    $("#imghref").val(res.imghref);
                    $("#imgnotice").val(res.imgnotice);
                    $("#imgpage").val(res.imgpage);
                    $("#imguse").val(res.imguse);
                    //重新渲染select
                    form.render('select');
                } else {
                    layer.msg("未查询到数据.", {icon: 5, time: 1000})
                }

            },
            error: function (msg) {
                layer.msg("服务器请求失败！", {icon: 5})
            }
        });


        //监听提交
        form.on('submit(demo1)', function (data) {
            var imguse = $("#imguse").val();
            var imgurl = $("#imgurl").val();
            var imgnotice = $("#imgnotice").val();
            var imghref = $("#imghref").val();
            var imgpage = $("#imgpage").val();
            //封装对象
            var image = {
                id: id,
                imguse: imguse,
                imgurl: imgurl,
                imgnotice: imgnotice,
                imghref: imghref,
                imgpage: imgpage
            }
            $.ajax({
                url: '/refuse-web/api/indeximg/updateimg',
                method: 'post',
                contentType: 'application/json; charset=UTF-8',//设置content-type
                data: JSON.stringify(image),//将对象转换成json字符串
                dataType: 'JSON',
                success:
                    function (res) {
                        if (res.code = '0') {
                            layer.msg('修改成功', {icon: 1, time: 1000}, function () {
                                layer.closeAll();
                                parent.location.reload();
                            });
                        } else {
                            layer.msg("修改失败", {icon: 5, time: 1000}, function () {
                                layer.closeAll();
                                parent.location.reload();
                            });
                        }
                    }
                ,
                error: function (data) {
                    layer.msg("服务器忙...", {icon: 5})
                }
            });
            return false;
        })
    });
</script>
</html>